<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>css</title>
	<style>
		* {margin: 0;padding: 0;}
		.letter_nav li:not(:first-child) {
			background-color: red;
		}
		#mg {
			width: 200px;
			height: 200px;
			/*line-height: 200px;*/
			border: 2px solid red;
			margin-top: 10px;
			text-align: center;
			display: table;
		}
		#div_mid {
			display: table-cell;
			vertical-align:middle;
		}
		.nk {
			display: inline-block;
			/*display: block;*/
			width: 90px;
			height: 90px;
			/*margin: 0 auto;*/
			border: 2px solid blue;
			/*display: table-cell;*/
			/*vertical-align:middle;*/
		}
		.test02 {
			width: 200px;
			height: 200px;
			border: 2px solid green;
			display: table;
		}
		.test02 span {
			width: 80px;
			height: 80px;
			border: 3px solid yellow;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}

	
	</style>
	<script src="lib/zepto.min.js"></script>
</head>
<body>


	<ul class="letter_nav">
		<li class="first">item1</li>
		<li id="val">item2</li>
		<li>item3</li>
		<li>item4</li>
		<li>item5</li>
		<li>item6</li>
		<li>item7</li>
		<li>item8</li>
	</ul> 

	<div id="mg">
		<div id="div_mid">
			<span class="nk">dfhgfdch</span>
		</div>		
	</div>
	<div class="test02">
		<span>ceshi002</span>
	</div>
	<script>
	window.onload = function() {
		// var a = 0;
		// var testObj = {

		// };

		// setTimeout(,1000)

		// for(var i=0;i<10;i++) {
		// 	a++;
		// 	// console.log(a);
		// };
		var val = $('#val').html();
		console.log(val);
	}
	</script>
</body>
</html>